<template>
  <page-header-wrapper :title="false">
    <a-spin :spinning="loading">
      <a-row :gutter="20">
        <a-col :span="12">
          <a-row :gutter="[0, 20]">
            <a-col :span="24">
              <a-card title="业务基本信息">
                <div slot="extra">
                  <a-tag color="red">{{ businessDetail['business_category_name'] }}</a-tag>
                </div>
                <a-descriptions
                  :column="{ md: 2 }"
                >
                  <a-descriptions-item label="价格">
                    <a-statistic :precision="2" :value="businessDetail['price']" />
                  </a-descriptions-item>
                  <a-descriptions-item label="官费">
                    <a-statistic :precision="2" :value="businessDetail['official_fee']" />
                  </a-descriptions-item>
                  <a-descriptions-item label="业务编号">
                    <b>{{ businessDetail['business_no'] }}</b>
                  </a-descriptions-item>
                  <a-descriptions-item label="合同编号">
                    <b>{{ businessDetail['contract_no'] }}</b>
                  </a-descriptions-item>
                  <a-descriptions-item label="客户姓名">
                    <b>{{ businessDetail['customer_name'] }}</b>
                  </a-descriptions-item>
                  <a-descriptions-item label="联系电话">
                    <b>{{ businessDetail['phone'] }}</b>
                  </a-descriptions-item>
                  <a-descriptions-item label="业务开启时间">
                    <b>{{ businessDetail['open_time'] }}</b>
                  </a-descriptions-item>
                  <a-descriptions-item label="业务小类">
                    <b>{{ businessDetail['business_name'] }}</b>
                  </a-descriptions-item>
                  <a-descriptions-item label="申请主体">
                    <b>{{ businessDetail['subject'] }}</b>
                  </a-descriptions-item>
                  <a-descriptions-item label="商标类别">
                    <b>{{ businessDetail['sb_category'] }}</b>
                  </a-descriptions-item>
                  <a-descriptions-item label="业务名称">
                    <b>{{ businessDetail['sb_name'] }}</b>
                  </a-descriptions-item>
                  <a-descriptions-item label="商标注册号">
                    <b>{{ businessDetail['sb_reg_no'] }}</b>
                  </a-descriptions-item>
                </a-descriptions>
              </a-card>
            </a-col>
            <a-col :span="24">
              <a-card title="业务材料">
                <div slot="extra">
                  <a-button type="primary" @click="editFill" :style="{ marginRight: '10px' }">填写材料</a-button>
                  <a-button vtype="danger">{{ businessDetail.status2_name }}</a-button>
                </div>
                <a-alert
                  show-icon
                  type="success"
                  style="margin-bottom: 20px"
                >
                  <span slot="message">
                    整理后的材料: <a :href="businessDetail['mat_file_url']" target="_blank">{{ businessDetail['mat_file_name'] }}</a>
                  </span>
                </a-alert>
                <a-descriptions
                  layout="horizontal"
                  :column="{ md: 1 }"
                >
                  <a-descriptions-item v-for="(item, index) in matInfo" :key="index" :label="item.mat_name">
                    <div v-if="item.type === 'image'">
                      <a :href="item.value" target="_blank" style="margin-right: 5px">
                        <img :src="item.value" width="60">
                      </a>
                      <a v-if="item.value !== ''">
                        <a-icon :style="{ fontSize: '20px', color: '#1890ff' }" type="download" @click="downFile(item.value, item.filename)" />
                      </a>
                    </div>
                    <div v-else-if="item.type === 'file' || item.type === 'file-xls'">
                      <a :href="item.value" target="_blank" style="margin-right: 5px">
                        {{ item.filename }}
                      </a>
                    </div>
                    <b v-else>{{ item.value }}</b>
                  </a-descriptions-item>
                </a-descriptions>
              </a-card>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12">
          <a-row :gutter="[0, 20]">
            <a-col :span="24">
              <a-card title="业务流转记录">
                <a-timeline>
                  <a-timeline-item v-for="(item,index) in businessHistories" :key="index">
                    <p>{{ item.created_at }} {{ item.step }}，{{ item.username }}，{{ item.notes }}，<a :href="item.file">{{item.filename}}</a></p>
                  </a-timeline-item>
                </a-timeline>
              </a-card>
            </a-col>
            <a-col :span="24">
              <a-card title="业务后续进展">
                <a-empty v-if="states.length === 0" :description="false" />
                <p v-for="(item,index) in states" :key="index">
                  <span :style="{ marginRight: '20px' }">{{ item.created_at }}</span>
                  <span>
                    {{ item.state_name }}
                    <a-divider type="vertical" />
                    <a @click="downFile(item.file_url, item.file_name)">{{ item.file_name }}</a>
                    <a-divider type="vertical" />
                    <a @click="downFile(item.file_url, item.file_name)"><a-icon :style="{ fontSize: '16px', color: '#1890ff' }" type="download" /></a>
                  </span>
                </p>
              </a-card>
            </a-col>
            <a-col :span="24">
              <a-card title="转移记录">
                <s-table
                  bordered
                  size="middle"
                  :row-key="(record,index) => index"
                  :columns="moveColumns"
                  :data="transferData"
                >
                </s-table>
              </a-card>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-spin>
    <fill-modal v-if="visible" :fill-key="$route.params.id" :from-source="'2'" @submit="handleSubmit" @cancel="handleCancel"></fill-modal>
  </page-header-wrapper>
</template>

<script>
  import { STable } from '@/components'
  import { FillModal } from './components'
  import { getDetail, getBusinessTransfer, postInFill } from '@/api/business'
  import apis from '@/api'
  import col from '@/columns/business'
  const moveColumns = col.move
  export default {
    components: {
      FillModal,
      STable
    },
    name: 'BusinessDetail',
    data () {
      return {
        moveColumns,
        transferData: parameters => {
          return getBusinessTransfer(this.queryParam).then(res => {
            return res.result
          })
        },
        visible: false,
        loading: true,
        businessDetail: {},
        businessCategory: {},
        businessHistories: [],
        states: [],
        matInfo: [],
        queryParam: {}
      }
    },
    activated () {
      this.getBusinessDetail(this.$route.params.id)
      this.businessDetail['cb_id'] = this.$route.params.id
      this.queryParam['filter[cb_id]'] = this.$route.params.id
    },
    methods: {
      getBusinessDetail (id) {
        const app = this
        getDetail(id).then(res => {
          if (res.status === 0) {
            // app.businessCategory = res.result['business_category_opts']
            app.businessDetail = res.result['contract_business']
            app.businessHistories = res.result['histories']
            app.states = res.result['states']
            // app.formType = res.result['mat_type_opts']
            app.matInfo = res.result['mats']
            app.loading = false
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      downFile (value, filename) {
        window.open(apis.Download + '?value=' + value + '&filename=' + filename)
      },
      handleCancel (visible) {
        this.visible = visible
      },
      handleSubmit (form) {
        const app = this
        form['cb_id'] = app.queryParam['filter[cb_id]']
        postInFill(form).then(res => {
          if (res.status === 0) {
            app.getBusinessDetail(app.queryParam['filter[cb_id]'])
            app.visible = false
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      editFill () {
        this.visible = true
      }
    }
  }
</script>

<style scoped>

</style>
